<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>

 

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
    <script>
    $(function () {       
		$('#backid').click(function(){
				window.location.href="index.html";
		 });
    });
</script>
</head>
<body>
<form id="myForm" method="post" class="definewidth m20">
<input type="hidden" name="id" value="{$user.id}" />
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">资源名称</td>
            <td><input type="text" id="m_name" name="m_name"/><span id="name_res" style="color: red;margin-left: 10px"></span></td>
        </tr>
        <tr>
            <td class="tableleft">url</td>
            <td><input type="text" id="m_url" name="m_url"/><span id="url_res" style="color: red;margin-left: 10px"></span></td>
        </tr>
        <tr>
            <td class="tableleft">是否有效</td>
            <td>
                <input type="radio" name="m_state" value="0" checked/> 有效
              <input type="radio" name="m_state" value="1" /> 无效
            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button type="button" class="btn btn-primary" id="insert">添加</button>&nbsp;&nbsp;<button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>

<script>
    $(function () {
        // 1.判断资源是否重复
        function isExistOfMenu(){
            let val = $("#m_name").val();
            if (val=='') {
                alert("请填写资源名称");
            } else {
                $.getJSON("/menu/isExistMenu/" +val ,null,function (data) {
                    if (data.result=="success"){
                        $("#name_res").html(data.msg);
                    } else{
                        $("#name_res").html("");
                    }
                })
            }

        }
        // 2. url的非空验证
        function isNullOfUrl() {
            return $("#m_url").val()=='' ? true:false;
        }
        // url input blur事件
        $("#m_url").blur(function () {
            if (isNullOfUrl()) {
                alert("请填写资源路径")
            }
        })
        $("#m_name").blur(function () {
            isExistOfMenu()
        })
        $("#insert").click(function () {
            let val = $("#m_name").val();
            if (val=='') {
                alert("请填写资源名称");
            } else {
                $.getJSON("/menu/isExistMenu/" +val ,null,function (data) {
                    if (data.result=="success"){
                        // 资源名相同
                        $("#name_res").html(data.msg);
                    } else{
                        // 资源名验证通过
                        // 验证资源路径
                        if (!isNullOfUrl()) {
                            // 验证通过
                            // 发送ajax请求添加
                            $.post("/menu",$("#myForm").serialize(),function (data) {
                                if (data.code == 200) {
                                    // 服务器接收到了请求
                                    if (data.result == 'success') {
                                        alert("添加成功");
                                        location.href = 'index.html';
                                    } else {
                                        alert("添加失败");
                                    }
                                } else {
                                    alert("服务器出错！请稍后重试");
                                }
                            })
                        } else {
                            // 弹框提示
                            alert("请填写资源路径");
                        }
                    }
                })
            }
        })

    });

</script>

</html>